<template>
  <!--导入数据库文档-->
  选择本地文件：<input
    @change="mychange"
    type="file"
    id="file"
    style="display:none1;"
  />  <el-button type="" @click="loadweb">选择远程文件</el-button>
  <hr>
  <!--工作簿-->
  <xls-sheet></xls-sheet><br><br> 
  <el-row :gutter="20">
    <el-col :span="7">
      <!--表-->
      <xls-table></xls-table>
    </el-col>
    <el-col :span="17">
      <!--字段-->
      <xls-column></xls-column>
    </el-col>
  </el-row><br><br> 
  <!--meta-->
  <el-tabs type="border-card">
    <el-tab-pane label="增删改查">
      <!--增删改查-->
      <crud-websql></crud-websql>
    </el-tab-pane>
    <el-tab-pane label="列表">
      <!--列表-->
      <meta-grid></meta-grid>
    </el-tab-pane>
    <el-tab-pane label="表单">
      <!--表单-->
      <meta-form></meta-form>
    </el-tab-pane>
    <el-tab-pane label="查询" v-if="false">
      <!--查询-->
      <meta-find></meta-find>
    </el-tab-pane>
    <el-tab-pane label="字段">
      <!--字段-->
      <meta-column></meta-column>
    </el-tab-pane>
    <el-tab-pane label="MySQL" v-if="false">
      <!--MySQL-->
      <db-mysql></db-mysql>
    </el-tab-pane>
    <el-tab-pane label="webSQL" v-if="false">
      <!--webSQL-->
      <db-websql></db-websql>
    </el-tab-pane>
    <el-tab-pane label="indexedDB" v-if="false">
      <!--indexedDB-->
      <db-indexed></db-indexed>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { loadDataFile, loadWebDataFile, regMetaDataState } from '../../../lib-excel/main'

  // 组件
  import xlsSheet from './comp/xls-sheet.vue'
  import xlsTable from './comp/xls-table.vue'
  import xlsColumn from './comp/xls-column.vue'
  import metaColumn from './comp/meta-col.vue'
  import metaGrid from './comp/meta-grid.vue'
  import metaForm from './comp/meta-form.vue'
  import metaFind from './comp/meta-find.vue'
  import dbIndexed from './comp/db-db.vue'
  import dbMysql from './comp/db-mysql.vue'
  import dbWebsql from './comp/db-websql.vue'
  import crudWebsql from './comp/crud-websql.vue'

  export default defineComponent({
    name: 'nf-excel-meta',
    components: {
      xlsSheet,
      xlsTable,
      xlsColumn,
      metaColumn,
      metaGrid,
      metaForm,
      metaFind,
      dbIndexed,
      dbMysql,
      dbWebsql,
      crudWebsql
    },
    props: {
    },
    setup(props, context) {
      // 创建状态
      const state = regMetaDataState()

      // 选择本地文件
      const mychange = () => {
        const file1 = document.getElementById('file')
        if (file1.files.length > 0) {
          loadDataFile(file1.files[0], state, () => {
            // 选择第一个工作簿
            state.current.sheetName = state.sheetNames[0]
          })
        }
      }

      const loadweb = () => {
        const url = import.meta.env.BASE_URL
        const baseUrl = url === '/' ? '/demo.xls' : url + 'demo.xls'
        console.log('--url:', url, '--baseUrl:', baseUrl)
        loadWebDataFile(baseUrl, state, () => {
          // 选择第一个工作簿
          state.current.sheetName = state.sheetNames[0]
        })
      }

      return {
        state,
        mychange,
        loadweb
      }
    }
  })
</script>